<template>
    <div class="search">
        <div class="search-sousuo">
            <router-link to="index">
                <button>返回</button>
            </router-link>
            <input type="text" v-model="gjz">
            <van-icon @click="sousuo" name="search" />
        </div>

        <ul class="searchList">
            <li v-show="searchlist != 0" v-for="(value) in searchlist" :key="value.id">
                <router-link :to="{ path: '/detail', query: { id: value.id } }">
                    <img :src="value.cover">
                    <div class="text">
                        <p>{{ value.text }}</p>
                        <div class="miaoshu">
                            {{ value.d }}
                        </div>
                        <div class="zuozhe">
                            作者:{{ value.author }}
                        </div>
                    </div>
                </router-link>
            </li>

        </ul>
        <div v-show="searchlist = undefined" class="search-none">
            <van-empty description="" />
        </div>
    </div>
</template>
<style lang="less">
.search {
    .search-sousuo {
        background-color: turquoise;
        padding: 15px 10px;
        color: white;
        display: flex;
        justify-content: space-around;
        font-weight: bold;

        i {
            font-size: 30px;
        }

        input {
            width: 60%;
            border: 1px solid;
            border-radius: 15px;
            padding: 2px 15px;
        }
    }

    .searchList {
        padding: 5px;

        li {
            a {
                display: flex;
                padding: 10px;
                border-bottom: 4px solid #ccc;
                margin-bottom: 10px;
                border-radius: 15px;

                img {
                    height: 130px;
                    border-radius: 15px;

                }

                .text {
                    width: 100%;
                    position: relative;

                    p {
                        position: absolute;
                        top: 5px;
                        left: 5px;
                        font-weight: bold;
                        font-size: 25px;
                    }

                    .miaoshu {
                        margin-top: 35px;
                        margin-left: 5px;
                        font-size: 14px;
                        color: #ccc;
                    }

                    .zuozhe {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        font-size: 18px;
                        font-weight: bold;
                    }

                }
            }

        }
    }
}
</style>
<script>
import http from '../api/request.js'
export default {
    data() {
        return {
            searchlist: [],
            gjz: ''
        }
    },
    methods: {
        async searchData() {
            await http.get(`/search/searchHint?search=${this.gjz}`)
                .then(
                    content => {
                        this.searchlist = content.words.w;
                        console.log(this.searchlist);
                        console.log(this.searchlist.length);

                    }
                )
                .catch(
                    err => {
                        console.log("搜索失败", err);
                    }
                )
        },
        sousuo() {
            if (this.searchlist == undefined) {
                alert('没有这个小说')
                return;
            }
            if (this.gjz == '') {
                alert("输入框不能为空");
                return;
            }
            this.searchData();
        }
    },
    created() {
    },
}
</script>